<?php
    session_start();
    if(! isset($_SESSION['username'])) {
        header('Location:index.html');
    }

    ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="js/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
<style>
   #msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: #f05f55;
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 52px;
}
        body{
            font-size: 100%;
            font-weight: normal;
            text-align: center;
            background: #ffffff;
        }
        h2{
            text-align: center;
        }
        table{
            width:65%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        td{
            text-align: center;
            border-top: 1px solid black;
        }
        tr:hover td{
            background-color: #FFCC99;
            color:white;
        }
        form{
            margin: 40px;
        }
        fieldset{
            
            border: none;
            border-radius: 2px;
            margin-bottom: 12px;
        }

        label{
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 150px;
            vertical-align: top;
        }

        input{
            font-size: inherit;
        } text-align: right;
        
        * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    form fieldset p textarea {
      width: 300px;
      height: 150px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 5px;
      padding-top: 5px;
      font-size: 10px;
    }

    .controls {
     
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    form fieldset p #send {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      border-radius: 20px;
      font: bold 14px '宋体';
      transition: all 0.5s;
    }
    form fieldset p #op {
        /* width: 200px;
      height: 100px; */
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 5px;
      padding-top: 5px;
      font-size: 16px; 
    margin-bottom: 10px;
    }

    form fieldset p #send:hover {
      background: rgb(0, 225, 255);
    }

    form fieldset p #send:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

   
.useCount {
color:#666;
}
#ee {

font-size: 13px;

}
#ee {
opacity:0.6;
color:red;
font-size: 16px;

}

    

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px '宋体';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 16px;
    }

    .contentList img {
      width: 80px;
      
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
 #send {
width: 100px;
outline: none;
border: none;
background: rgb(0, 132, 255);
height: 30px;
cursor: pointer;
color: #fff;
border-radius: 20px;
font: bold 14px '宋体';
transition: all 0.5s;
margin-top: 30px;
    visibility: hidden; 

  }

       
      
        
/*        
            background: url(./663.png)no-repeat; */

        marquee {
            background-color: #fff;
        }
.flex {
  display:flex;
  justify-content:center;
  align-items:center;
margin-bottom: 16px;
 }
 .demo {
  width:100%;
  height:22.85px;
  position:relative;
  /* background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8); */
  color:#000;
  opacity: 0.6;
  font-size:13px;
 }
 .circle {
  width:100px;
  height:100px;
  border-radius:50%;
  position:relative;
  background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
  color:#fff;
 }
 .circle:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:-6px;
  border:5px solid transparent;
  border-top:5px solid #f64f59;
  border-radius:50%;
  transform:rotate(45deg);
  animation:circleRotate 3s linear infinite;
 }
 @keyframes circleRotate {
  0% {
   transform:rotate(0);
  }
  100% {
   transform:rotate(360deg);
  }
 }
 * {
    
    margin:0px;
    padding:0px;
    font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica;
}
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
*/
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*内容总区域的长度，自行控制*/
.timeline-block {
    width:90%;
    margin:0 auto;
}
/*title区域*/
.timeline-title-info {
    display:-webkit-box;
    display:-moz-box;
    display:-0-box;
    display:-ms-box;
    display:box;
}
/*公告文字*/
.timeline-title {
    color:#F67236;
    margin-right:16px;
}
/*日期*/
.timeline-time {
    -webkit-box-flex:1;
    box-flex:1;
font-size: 10px;
margin: 5px;
  margin-left: 5px;
margin-left: -50px;
color: #666;
}
/*内容区域*/
.timeline-info {
    width:100%;
}
/*内容文字*/
.timeline-content {
    border-left:1px solid #FBC0A6;
   
    margin-left:10px;
    padding-left:34px;
    margin-top:10px;
    margin-bottom:8px;
    color:#999999;
    font-size:12px;
    position:relative;
    min-height:66px;
margin-right: 10px;
padding-right: 34px;
}

.timeline-content::before {
    content:'';
    display:block;
    position:absolute;
    left:-3px;
    right:-3px;
    top:-3px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#F6763D;
}

.timeline-content::after {
    content:'';
    display:block;
    position:absolute;
    left:-3px;
    right:-3px;
    bottom:0px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#F6763D;
}
 
#bj{
margin:20px;
}
            

   
    
    </style>   

<?php
    session_start();
    if(! isset($_SESSION['username'])) {
        header('Location:index.html');
    }

    ?>
<?php include ('menu.php');
//1. 链接数据库
header("content-type:text/html;charset=utf8");
include('conn.php');
$id=$_GET['id'];
//2.执行sql
$sql_select = "select * from stu where id='$id'";
$stmt = mysqli_query($conn,$sql_select);
//    var_dump($stmt);
//    die();
$stu = mysqli_fetch_assoc($stmt); // 解析数据
?>




    
    <?php
if($_SERVER["REQUEST_METHOD"]=="POST") {
include('conn.php');
    $nicheng = $_POST['nicheng'];
    $ss = $_POST['ss'];
    $nr = $_POST['nr'];
    $ip = $_POST['ip'];
    $sql = "select * from liu where nicheng = '{$_POST['nicheng']}' and nr='{$_POST['nr']}'";
          
            $rs = mysqli_query($link, $sql); //执行sql查询
            $row = mysqli_fetch_assoc($rs);
    
            if ($row) { // 用户存在；
                if ($_POST['nicheng'] == $row['nicheng'] && $_POST['nr'] == $row['nr']) { //对密码进行判断。// 内容没变化(存在)；
echo "<script>alert('你已发布过该留言！');</script>";
                }
}else{
    $sql = "insert into liu (nicheng,ss, nr, ip) values ('$nicheng', '$ss','$nr','$ip')";
    $rw = mysqli_query($conn, $sql);
    if ($rw ) {
          echo "<script>alert('已发布');</script>";
    } else {
        echo "<script>alert('发布失败');</script>";
    }
 header("refresh:0.5;url=main.php");
}
}
?>
    <div class="demo flex"><marquee behavior="" direction="">请勿输入违规字眼，文明用语，内容不符合的留言将会被删除</marquee></div>
    <form method="post" onsubmit=" return ssq()">
         <fieldset>
        <p>
            <!-- <label for="username">留言人:</label> -->
            <input id="op" maxlength="7"  value="<?php echo $_SESSION['nicheng'];?>"placeholder="留言人"type="hidden" id="username"  name="nicheng" align="left">
        </p>
        <img src="./images/tip.png">
        <input name="ss"type="hidden" value="<?php echo 
$time = date('Y-m-d h:i:s', time());?>">


        <p>
            <!-- <label for="message">留言内容:</label> -->
            <textarea id="op1"  minlength="10" maxlength="200" placeholder="说点什么吧..."id="message" name="nr" cols="30" rows="5"  align="left"></textarea>
        </p>
        <input name="ip"type="hidden" value="<?php echo 
$_SERVER['REMOTE_ADDR'];?>">
<div id="ee">
        <p><span class="useCount" id="useCount">0</span>
        <span>/</span>
        <span id="eea">200</span>
</div>
            <input id="send" type="submit" value="发    布" name="submit" >
        </p>
        </fieldset>
        <h2> </h2>
        
        
        
    </form>

    <?php
    //    1. 链接数据库
    header("content-type:text/html;charset=utf8");
include('conn.php');

   $sql_select = "select  * from liu order by id desc";
   ?>
    
   <?php
  
    foreach ( $conn->query($sql_select) as $row) {
        //2.执行sql  //3.data 解析
?>
<div id="bj">
            <div class="timeline-block">
        <!--标题-->
        <div class="timeline-title-info">
            <div class="timeline-title"><?=$row['nicheng']?></div><div class="timeline-time"><?=$row['ss']?></div>
        </div>
        <!--内容-->
        <div class="timeline-info">
            <div class="timeline-content"><?=$row['nr']?></div>
            
        
       
        </div>
    </div>
</div>
        <? }?>
    </form>

<script>
 $(function() {

              // 1. 隐式迭代 给所有的按钮都绑定了点击事件
              $('.timeline-info').slideUp(0)
              $(".timeline-title-info").click(function() {
                 // 2. 当前的元素变化背景颜色
             // 3. 其余的兄弟去掉背景颜色 隐式迭代
              $(this).siblings(".timeline-info").slideToggle(2000);
               });
         })
var textarea = document.querySelector('textarea')
    var useCount = document.querySelector('.useCount')

    // 发布按钮
    var send = document.querySelector('#send')


    
    textarea.addEventListener('input',function(){
      // console.log(this.value.length);
      useCount.innerHTML = this.value.length
       if(this.value.length==200){
         useCount.style.color="red"
         useCount.style.fontSize="16px"
}else{
useCount.style.color="#666"
useCount.style.fontSize="13px"
}
    })
 var s6 = document.querySelector('form')
  function ss(){
  s6.addEventListener('input',function(){
    if(op.value.trim() == ''){
      // s5.disabled=true
      send.style.visibility='hidden';
     return false
    }else if(op1.value.trim() == ''){
      // s5.disabled=true
      send.style.visibility='hidden';
      return false
    }else{
      // s5.disabled=false
      send.style.visibility='visible';
      return true
    }
  })
}
ss()
 
 
/* 
功能:为矩形元素附上一层运动的边线
原理:  核心:css clip rect   web animation 负责动态化
注意:请使用较高版本现代浏览器打开  本代码 使用了es6语法 且并未对css各浏览器前缀做处理
    如需兼容低版本浏览器   请自行加 web animate polyfill 及 使用babel转译
*/
 
 
/* 使用
_initDanceBorder(el,option);
*/
 
//纯 JS实现动态边框效果
//根据 http://www.jq22.com/jquery-info3297 bee木头 作者 核心思路(css clip rect) 创作
//传入依赖元素 自动生成动态边框
 
/* 
测试用配置
*/
const options = [{}, {
 duration: 12000,
 double: false
}, {
 duration: 4000,
 'border-color': 'red',
 'easing': 'ease-in-out'
}, {
 'margin': -15,
 'borderWidth': 10,
 'border-image': "url(./wx.png) 10 10",
 
}, {
 'borderWidth': 2
}]
 
 
//使用方法
for (let i = 0; i < document.getElementsByClassName('demo').length; i++) {
 _initDanceBorder(document.getElementsByClassName('demo')[i], options[i]);
}
 
/***************************      主 体 代 码       ********************************/
 
//传入dom元素与 配置即可
function _initDanceBorder(el, options = {}) {
    //默认设置  尺寸单位均为px
    let _options = {
        //边框模糊度  
        blur: 1,
        //距依赖元素距离 
        margin: -5,
        //边框宽度  
        borderWidth: 4,
        //转一周时长  
        duration: 8000,
        //运动效果  default:匀速
        easing: 'linear',
        //是否两条运动线  默认两条
        double: true,
        //渐变色边框 优先级高  若使用渐变色或图片背景  请正确传入该值  否则边框不会显示
        'border-image': 'linear-gradient(to bottom right, #12c2e9,#c471ed,#f64f59) 10 10',
        //边框色   border-image 优先级低
        'border-color': 'green'
    }
 
    //存在正常色 不存在渐变色   渐变色赋值为空
    options['border-color'] && !options['border-image'] && (_options['border-image'] = 'none')
    //设置拷贝
    Object.keys(_options).forEach(key => {
     options[key] && (_options[key] = options[key]);
        //double 的特殊判断
        if (key == 'double' && typeof options[key] == 'boolean') {
         _options[key] = options[key]
        }
    })
 
    //元素基本属性
    const styleObj = {
     'content': '',
     'z-index': -1,
     'margin': `${_options.margin}px`,
     'border': `${_options.borderWidth}px solid`,
     'border-color': _options['border-color'],
     'border-image': _options['border-image'],
     'filter': `blur(${_options.blur}px)`,
     'position': 'absolute',
     'top': 0,
     'bottom': 0,
     'left': 0,
     'right': 0
    }
 
    const pW = el.style.width || el.offsetWidth;
    const pH = el.style.height || el.offsetHeight;
 
    const fullWidth = pW + _options.margin * -2;
    const fullHeight = pH + _options.margin * -2;
 
    //四边切割数组
    const rectArray = [
    `rect(${-_options.blur}px, ${fullWidth}px, ${-_options.margin}px, ${-_options.blur}px)`,
    `rect(0px, ${-_options.margin}px, ${fullHeight + _options.blur}px, ${-_options.blur}px)`,
    `rect(${pH}px, ${fullWidth + _options.blur}px, ${fullHeight + _options.blur}px, 0px)`,
    `rect(${-_options.blur}px, ${fullWidth + _options.blur}px, ${fullHeight}px, ${pW + _options.blur}px)`
    ]
 
    const clipAnimate = [{
     clip: rectArray[0]
    },
    {
     clip: rectArray[1],
     offset: 0.25
    },
    {
     clip: rectArray[2],
     offset: 0.5
    },
    {
     clip: rectArray[3],
     offset: 0.75
    },
    {
     clip: rectArray[0],
     offset: 1
    }
    ];
 
    //由于border的可见特性使delay无效  第二条延迟一半的边动画   从0.5开始  
    const clipAnimateTwo = [{
     clip: rectArray[2]
    },
    {
     clip: rectArray[3],
     offset: 0.25
    },
    {
     clip: rectArray[0],
     offset: 0.5
    },
    {
     clip: rectArray[1],
     offset: 0.75
    },
    {
     clip: rectArray[2],
     offset: 1
    }
    ];
 
    const animateOption = {
     duration: _options.duration,
     iterations: Infinity,
     easing: _options.easing
    };
 
    const section = initBaseEl();
 
    //Web Animations  实现keyframes动画
    section.animate(clipAnimate, animateOption);
 
    //是否两条运动线
    if (_options.double) {
     let sectionTwo = initBaseEl();
     sectionTwo.animate(clipAnimateTwo, animateOption);
    }
 
    //构造元素
    function initBaseEl() {
     const section = document.createElement("section");
        //style属性赋值
        Object.keys(styleObj).forEach(key => {
         section.style[key] = styleObj[key]
        })
 
        el.appendChild(section);
 
        return section;
    }
 
 
    //页面尺寸改变  修改
}

  

   
</script>

</body>
</html>